<!-- 个人信息蒙版 -->
<template>
    <div class='Maskicon' v-if="tabms" @click="hidems">
        <div class="selficon">
            <Header><h2>个人信息</h2></Header>
            <ul>
                <li>
                    <i class="iconfont icon-wodedangxuan"></i>
                    <input type="text" class="username" placeholder="用户名">
                </li>
                <li>
                    <i class="iconfont icon-wodedangxuan"></i>
                    <input type="text" class="username" placeholder="金额">
                </li>
                <li>
                    <i class="iconfont icon-wodedangxuan"></i>
                    <input type="tel" class="username" placeholder="电话">
                </li>
                <li>
                    <i class="iconfont icon-wodedangxuan"></i>
                    <input type="email" class="username" placeholder="邮箱">
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
    import  Header from '@/components/Header.vue';
export default {
//import引入的组件需要注入到components对象中才能使用
props:{
    tabms:Boolean
},
components: {
    Header
},
data() {
//这里存放数据
return {

};
},
//计算属性 类似于data概念
computed: {
    tabs(){
      return  this.tabms
    }
},
methods:{
    hidems(){
      console.log(this.tabms);
      this.tabms=false
    }
},
destroyed() {
    // this.tabms=false
}, //生命周期 - 销毁完成
}
</script>
<style lang="less">
    .Maskicon{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        .selficon{
            width: 90%;
            height: 100%;
            background-color: #fff;
             ul{
                 padding-top: 16rem;
                width: 100%;
                height: auto;
                display: flex;
                flex-wrap: wrap;
                // margin-top: 5rem;
                li{
                    width: 100%;
                    background-color: #fff;
                    padding: 2rem;
                    border: 1px solid #ccc;
                    input{
                        outline: none;
                        border:none;
                        margin-left: 2rem;
                    }
                }
            }
        }
        .header{
            width: 90%;
        }
    }
</style>